<template>
  <div class="xtable3-panel-modal">
    <je-table
      ref="treeConfigRef"
      :stripe="false"
      auto-resize
      sync-resize
      show-overflow
      keep-source
      show-header-overflow
      resizable
      :height="tableHeight"
      border
      header-align="center"
      row-key
      :store="gridStore"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showUpdateStatus: true,
        showStatus: false,
      }"
      size="mini"
    >
      <je-table-column width="40">
        <template #header>
          <i
            style="font-size: 16px; cursor: pointer; text-align: center"
            class="fal fa-plus"
            @click.stop="addColumnTable"
          ></i>
        </template>
        <template #default="{ row }">
          <i
            style="font-size: 16px; cursor: pointer; margin-left: 5px; text-align: center"
            class="fal fa-times"
            @click.stop="deleteColumnTable(row)"
          ></i>
        </template>
      </je-table-column>
      <je-table-column
        title="属性"
        :edit-render="{ autofocus: '.ant-input' }"
        width="220"
        field="key"
      >
        <template #edit="{ row }">
          <je-input v-model:value="row.key" type="text"></je-input>
        </template>
      </je-table-column>
      <je-table-column
        title="值"
        :edit-render="{ autofocus: '.ant-input' }"
        width="220"
        field="value"
      >
        <template #edit="{ row }">
          <je-input v-model:value="row.value" type="text"></je-input>
        </template>
      </je-table-column>
      <je-table-column
        title="备注"
        :edit-render="{ autofocus: '.ant-input' }"
        min-width="100"
        field="desc"
      >
        <template #edit="{ row }">
          <je-input v-model:value="row.desc" type="text"></je-input>
        </template>
      </je-table-column>
    </je-table>
  </div>
</template>

<script>
  import { ref, defineComponent, onMounted } from 'vue';
  import { Grid, Input, Data } from '@jecloud/ui';
  import { uniqueId } from '@jecloud/utils';
  export default defineComponent({
    name: 'TreeConfigRef',
    components: {
      JeTable: Grid,
      JeTableColumn: Grid.Column,
      JeInput: Input,
    },
    props: {
      data: {
        type: Array,
        required: true,
      },
    },
    emits: ['getTreeConfigRef'],
    setup(props, { emit }) {
      const treeConfigRef = ref(null);
      const gridStore = Data.Store.useGridStore({
        data: [],
      });
      const tableHeight = ref();
      const addColumnTable = async () => {
        const record = {
          key: '',
          value: '',
          desc: '',
          id: uniqueId('grid_'),
        };
        gridStore.insert(record, -1);
        methods.changeHeight();
      };
      const methods = {
        changeHeight() {
          const arr = gridStore.data;
          let length = arr.length > 10 ? 10 : arr.length;
          const height = length ? 32 * (length + 1) : 200;
          tableHeight.value = height <= 200 ? 200 : height;
        },
        deleteColumnTable(record) {
          gridStore.remove(record);
          methods.changeHeight();
        },
      };
      onMounted(() => {
        gridStore.loadData(props.data);
        methods.changeHeight();
        emit('getTreeConfigRef', treeConfigRef.value);
      });
      return {
        ...methods,
        treeConfigRef,
        gridStore,
        addColumnTable,
        tableHeight,
      };
    },
  });
</script>
<style lang="less">
  .xtable3-panel-modal {
    .ant-input-affix-wrapper {
      padding: 2px 15px !important;
    }
  }
</style>
